import React from 'react';
import {connect} from 'dva'
import moment from 'moment'

import { DatePicker, List } from 'antd-mobile';

import Title from 'components/Title'
import Chart from 'components/Chart'
import AnalysisTitle from 'components/AnalysisTitle';

import TopNavBar from 'components/TopNavBar';
import Indicators from './components/Indicators'


const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const time = moment(now).format('YYYY')

@connect(({maintenance}) => ({...maintenance}))
class Maintenance extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time
    }

    this.Conf = {
      echartsConf: [
        {
          key: 'gdqk',
          label: '工单情况分析',
          chart: {
            type: 'Line', dataSource: 'StatisticsResource1',
            columns: {
              seriesItems: [{name: '个数', field: 'val'}],
              xAxis: { field: 'time', format: 'M月' },
              yAxis: { name: '个数' },
            }
          },
          extra: {
            list: [{ label: '工单总数', field: 'count' }],
            source: { type: 'count', field: 'val' },    // count,则从数组中累加; field累加字段
          },
          server: { type: 'maintenance/queryStatistics', payload: { type: 1  }},
        },
        {
          key: 'gdzx',
          label: '工单执行分析',
          chart: {
            type: 'Bar', dataSource: 'AnalysisResource5',
            columns: {
              seriesItems: [{name: '个数', field: 'val'}],
              xAxis: { field: 'title' },
              yAxis: { name: '个数' },
            }
          },
          extra: {
            list: [ // 附加内容
              { label: '总计', field: 'count' },
              { label: '已完成', field: 'open' },
              { label: '未完成', field: 'closed' },
              { label: '延期', field: 'delay' },
            ],
            source: { type: 'first' },  // count,则从数组中累加; first,则从数组中取第一条
          },
          server: { type: 'maintenance/queryAnalysis', payload: { type: 5  }},
        },
        {
          key: 'gdly',
          label: '工单来源分析',
          chart: {
            type: 'Pie', dataSource: 'AnalysisResource4',
            other: { formatType: 'percent' },
            columns: {
              name: '',
              field: [{name: 'title', value: 'val'}]
            }
          },
          server: { type: 'maintenance/queryAnalysis', payload: { type: 4  }},
        },
        {
          key: 'gdlx',
          label: '工单类型分析',
          chart: {
            type: 'Bar', dataSource: 'AnalysisResource2',
            columns: {
              seriesItems: [
                {name: '巡检养护', field: 'val'},
              ],
              xAxis: { field: 'title' },
              yAxis: { name: '个数' },
            }
          },
          server: { type: 'maintenance/queryAnalysis', payload: { type: 2  }},
        },
        {
          key: 'xjyh',
          label: '巡检养护分析',
          chart: {
            type: 'Bar', dataSource: 'StatisticsResource5',
            color: ['#aa81f3'],
            columns: {
              seriesItems: [
                {name: '巡检养护', field: 'val'},
              ],
              xAxis: { field: 'time', format: 'M月' },
              yAxis: { name: '个' },
            }
          },
          server: { type: 'maintenance/queryStatistics', payload: { type: 5  }},
        },
        {
          key: 'sjsb',
          label: '事件上报分析',
          chart: {
            type: 'Pie', dataSource: 'AnalysisResource3',
            other: { formatType: 'percent' },
            columns: {
              name: '',
              field: [{name: 'title', value: 'val'}]
            }
          },
          server: { type: 'maintenance/queryAnalysis', payload: { type: 3  }},
        }
      ]
    }
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateECharts()
  }

  // 图表
  setDateECharts = () => {
    const { echartsConf } = this.Conf;
    echartsConf.forEach(ele => {
      const { server } = ele;
      if(server) this.queryECharts(server);
    })
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time } = this.state;
    let { payload } = server;
    Object.assign(payload, { time })
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }
  // change
  handleChange = (data) => {
    const lastTime = this.state.time;
    const time = moment(data).format('YYYY')
    if(lastTime === time){
      return;
    }
    this.setState({
      time
    }, async () =>{
      await this.setDateECharts()
    })
  }

  // 图表渲染
  RenderECharts = () => {
    const { echartsConf } = this.Conf;
    const { props } = this;

    let charts = null;
    charts = echartsConf.map(ele => {
      const { key, label, chart, extra } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;
      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={props[dataSource]}
            extra = {extra}
            other = {other}
          />
        </Title>
      )
    })
    return <>{charts}</>
  }

  // 格式化时间
  formatDate(date){
    const yearStr = `${date.getFullYear()}年`;
    return yearStr;
  }
  // 时间插件
  RenderDatePicker = () => {
    const { time } = this.state;
    const value = moment(time, 'YYYY').toDate()
    return (
      <List>
        <DatePicker
          mode="year"
          title="选择时间"
          value={value}
          format={val => `${this.formatDate(val)}`}
          onChange={e => this.handleChange(e)}
        >
          <List.Item arrow="horizontal">选择时间：</List.Item>
        </DatePicker>
      </List>
    )
  }

  // 标题
  RenderNavBar = () => {
    const { route } = this.props;
    return <TopNavBar title={route.title} />;
  }

  render() {
    
    return (
      <div>
        {this.RenderNavBar()}
        <Indicators />
        <AnalysisTitle />
        {this.RenderDatePicker()}
        {this.RenderECharts()}
      </div>
    )
  }
}

export default Maintenance;
